<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排队2</title>
</head>
<body>
    
<div id="box">
    <ul>
        <li v-for = "( item , index ) in datalist "> {{ item.content }}</li>
    </ul>

    <hr>

    <button @click = "go" > 走走 </button>
</div>

<script src="http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>

<script>

const app = new Vue({
    el : "#box",
    data : {
        datalist : [
            { id : 0 , content : "老大" },
            { id : 1 , content : "张三" },
            { id : 2 , content : "李四" },
            { id : 3 , content : "王五" },
            { id : 4 , content : "赵六" },
            { id : 5 , content : "孙七" },
            { id : 6 , content : "钱八" },
            { id : 7 , content : "马九" },
            { id : 8 , content : "周十" },
        ],
    },
    methods : {
        go(){
            // 数组的shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
            this.datalist.push( this.datalist.shift() )
        }
    }
})



</script>


</body>
</html>